<script lang="js" setup>
import {getCurrentInstance, reactive, ref} from 'vue'
import router from "@/router";
import {Travel} from "@/store/Travel.js";
import {ElMessage, ElMessageBox} from "element-plus";
import {Schedules} from "@/store/Schedule.js";
import {useUserStore} from "@/store/User.js";
const { proxy } = getCurrentInstance();

let postResult = true;
const travelInfo =  Travel();
const userStore = useUserStore();
const schedules = Schedules().schedules.values();

// do not use same name with ref
const form = ref({
  foodCost: 0,
  transportCost: 0,
  hotelCost: 0,
  isAdvance: false,
  desc: '',
  payment:0
})

const onSubmit = () => {
  console.log('submit!');
  if(form.value.isAdvance){
    travelInfo.setBudget(form.value.foodCost, form.value.transportCost, form.value.hotelCost, form.value.desc, form.value.payment)
  }
  else {
    travelInfo.setBudget(form.value.foodCost, form.value.transportCost, form.value.hotelCost, form.value.desc, 0)
  }
  ElMessageBox.confirm(
      '你确定要提交吗？',
      '确认提交',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }
  ).then(async () => {
    console.log(userStore.user.userId)
    // 用户点击确认时，发起请求
    let result = await proxy.Request({
      url: proxy.Api.addTravel,
      showLoading: true,
      params: {
        travelReason: travelInfo.travelReason,
        travelDetail: travelInfo.travelDetail,
        applyDate: new Date(),
        startDate: new Date(travelInfo.startDate),
        endDate: new Date(travelInfo.endDate),
        foodCost: travelInfo.foodCost,
        transportCost: travelInfo.transportCost,
        hotelCost: travelInfo.hotelCost,
        costDetail: travelInfo.costDetail,
        advancePayment:travelInfo.advancePayment,
        userId: userStore.user.userId,
      },
    });
    schedules.forEach(function (schedule){
      let result1 = proxy.Request({
        url: proxy.Api.addSchedule,
        showLoading: true,
        params: {
          location: schedule.location,
          task: schedule.task,
          scheduleDetail: schedule.detail,
          startDate: new Date(schedule.date1),
          endTime: new Date(schedule.date1),
        },
      });
      if(!result1){
        postResult = false;
      }
    })
    console.log(userStore.user)
    let result3 = await proxy.Request({
      url: proxy.Api.addApproval,
      showLoading: true,
      params: {
        userId: userStore.user.userId,
        advancePayment:travelInfo.advancePayment,
      },
    });
    if(result&&postResult&&result3){
      // 提交成功后的操作
      ElMessage({
        message: '提交成功',
        type: 'success',
      });
      await router.push('/travel/ApplySuccess');
    }
  }).catch(() => {
    // 用户点击取消时执行的操作
    ElMessage({
      message: '操作已取消',
      type: 'info',
    });
  });
}
const returnLast = () => {
  router.push('/travel/Scheduling');
}
</script>

<template>
  <div class="main-container">
    <div class="form-container">
      <el-steps style="max-width: 100%" :active="3" finish-status="success" align-center>
        <el-step title="查看差旅规章制度" description="View rules" />
        <el-step title="申请出差" description="Apply for travel" />
        <el-step title="规划行程" description="Plan schedules" />
        <el-step title="预算申请" description="Budget request" />
        <el-step title="出差申请完成" description="Success" />
      </el-steps>
      <el-divider />

      <div style="font-size: 25px; color: #009dff; font-weight: bolder; width: 100%; text-align:center; margin: 0 0 20px 0">预 算 申 请</div>

      <el-form class="form" :model="form" label-width="auto" style="max-width: 600px">
        <el-form-item label="餐饮费用">
          <el-input-number v-model="form.foodCost" :precision="2" :step="100" :max="50000" :min="0" controls-position="right">
          <template #prefix>
            <span>￥</span>
          </template>
          </el-input-number>
        </el-form-item>
        <el-form-item label="交通费用">
          <el-input-number v-model="form.transportCost" :precision="2" :step="100" :max="50000" :min="0" controls-position="right">
          <template #prefix>
            <span>￥</span>
          </template>
          </el-input-number>
        </el-form-item>
        <el-form-item label="住宿费用">
          <el-input-number v-model="form.hotelCost" :precision="2" :step="100" :max="50000" :min="0" controls-position="right">
          <template #prefix>
            <span>￥</span>
          </template>
          </el-input-number>
        </el-form-item>
        <el-form-item label="预算明细">
          <el-input v-model="form.desc" type="textarea" />
        </el-form-item>
        <el-form-item label="是否预支">
          <el-col :span="10">
            <el-switch
                v-model="form.isAdvance"
                inline-prompt
                size="large"
                active-text="是"
                inactive-text="否"
            />
          </el-col>
          <el-form-item label="预支款" v-if="form.isAdvance">
            <el-input-number v-model="form.payment" :precision="2" :step="100" :max="100000" :min="0" controls-position="right">
              <template #prefix>
                <span>￥</span>
              </template>
            </el-input-number>
          </el-form-item>
        </el-form-item>
        <el-form-item style="width: 100%; align-items: center">
          <div style="margin: 10px auto 0;">
            <el-button class="button" type="primary" @click="onSubmit" size="large">提 交</el-button>
            <el-button class="button" size="large" @click="returnLast">取 消</el-button>
          </div>
        </el-form-item>
      </el-form>
    </div>
  </div>

</template>

<style>
.main-container{
  width: 100%;
}
.form-container{
  margin: 10px auto auto;
  width: 55%;
  padding: 2% 5%;
  border-radius: 20px;
  box-shadow: 0px 0px 15px 0px rgba(122, 122, 122, 0.3);
  -webkit-box-shadow: 0px 0px 15px 0px rgba(122, 122, 122, 0.3);
  -moz-box-shadow: 0px 0px 15px 0px rgba(122, 122, 122, 0.3);
}
.form{
  margin: 0 auto;
  padding: 0 5%;
}
.button{
  margin: 0 auto;
}
</style>